// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView, Dimensions, TouchableOpacity,TouchableWithoutFeedback} from 'react-native';
import AllStyle from '../../../../style';
import {HeaderTitle} from '../../../../componet/settingComponent/HeaderTitle';
import {SafeAreaView} from 'react-native-safe-area-context';
import {CardItem} from '../../../../componet/settingComponent/CardItem';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {getFaceDateInfoList} from '../../../../api/facedatabase';
import {Loading} from '../../../../utils/Loading';
import {Toast} from '../../../../utils/Toast';


/**
 * @Description:
 * @author TangYong
 * @date 2023/3/13
 */
export class FaceManagement extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            faceDateInfoList:[]
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
        this.init()
    }

    //方法
    init=()=>{
        Loading.show()
        getFaceDateInfoList().then(res=>{
            //console.log(JSON.stringify(res));
            Loading.hidden()
            let faceDateInfoList=res.data
            this.setState({faceDateInfoList})
        }).catch(err=>{
            Toast.showWarning(err.toString())
            Loading.hidden()
        }).finally(()=>{
            Loading.hidden()

        })
    }
    back = () => {
        // const route = {
        //
        //     name: this.props.route.params.routePathName,
        //     params: {
        //         Name: this.state.Name,
        //     },
        // };
        // this.props.navigation.navigate(route);
        this.props.navigation.goBack()
    };
    goto = (name, params) => {

        const route = {
            name: name,
            params: {
                routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };

    //DOM
    render() {
        return (
            <SafeAreaView edges={['top', 'left', 'right', ]} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => this.back()} headtitle={this.props.route.params.title}></HeaderTitle>
                    <ScrollView style={{padding: 15}}>
                        <View style={AllStyle.card}>
                            <TouchableOpacity onPress={() => {
                                this.goto('faceAudit', {title: '人脸审核'});
                            }}>
                                <CardItem title={'人脸审核'}></CardItem>
                            </TouchableOpacity>

                        </View>
                        <View style={style.cardContainer}>
                            {this.state.faceDateInfoList.map((item)=>{
                                return  <TouchableWithoutFeedback key={item.userId} onPress={()=>{
                                    this.goto('faceRecord',{title:'人脸录入',userId:item.userId})
                                }}>
                                    <View style={style.cardBodyItem}>


                                        <View style={style.cardBodyTop}>
                                            <Icon name={'face-recognition'} color={ item.faceDatabaseEntity==null?'#999': '#0089FD'} size={25}></Icon>
                                        </View>
                                        <Text>{item.username}</Text>
                                    </View>
                                </TouchableWithoutFeedback>
                            })}



                        </View>
                    </ScrollView>
                </View>

            </SafeAreaView>
        );
    }

}

const width = Dimensions.get('window').width;
const style = StyleSheet.create({
    //样式
    cardContainer: {
        marginLeft: -15,
        paddingLeft: 10,
        //backgroundColor: 15,
        flexDirection: 'row',
        width: width,
        flexWrap: 'wrap',

    },
    cardBodyItem: {
        marginTop: 5,
        alignItems: 'center',
        justifyContent: 'center',
        width: (width - 20 - 10 - 15) / 4,
        marginLeft: 5,
        backgroundColor: '#FFF',
        borderRadius: 5,
        paddingTop: 5,
        paddingBottom: 5,
    },

    cardBodyTop: {
        paddingTop: 15,
        paddingBottom: 15,
    },

});

